<template>
  <div class="wrap-container">
    <i class="el-icon-data-analysis" :style="getTextColor(data.state)"></i>
    <div class="content">
      <div class="title">{{ data.name }}</div>
      <div class="content-msg">
        <div class="content-value">{{ data.value }} {{ data.unit }}</div>
        <div class="content-state">
          {{ data.state | stateFilter }}
        </div>
        <div class="content-button" v-if="data.pointKey == 'A20'">
          <el-button type="text" @click="handle(data.id)">清零</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getBlackReset } from "@/api/earlyWarning";
export default {
  name: "ItemWrap",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    stateFilter(val) {
      switch (val) {
        case 0:
          return "健康";
        case 1:
          return "异常";
        case 2:
          return "严重";
        default:
          return "";
      }
    },
  },
  methods: {
    handle(id) {
      getBlackReset({ id: id }).then((res) => {
        if (res.code == 20000) {
          this.$message.success("成功");
					this.$emit('showItem')
        }
      });
    },
    getIconBgColor(state) {
      return {
        "background-color":
          state == 0
            ? "#1cbe21"
            : state == 1
            ? "#ffaa00"
            : state == 2
            ? "#ff3737"
            : "#1cbe21",
      };
    },
    getTextColor(state) {
      return {
        color:
          state == 0
            ? "#1cbe21"
            : state == 1
            ? "#ffaa00"
            : state == 2
            ? "#ff3737"
            : "#1cbe21",
      };
    },
  },
};
</script>
<style scoped lang="less">
.wrap-container {
  position: relative;
  width: 300px;
  height: 80px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .el-icon-data-analysis {
    font-size: 28px;
    color: #1cbe21;
  }
  .content {
    height: 100%;
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    color: #fff;
    .title {
      height: 50%;
      width: 100%;
      display: flex;
      align-items: center;
    }
    .content-msg {
      height: 50%;
      width: 100%;
      display: flex;
      align-items: center;
      .content-value {
        margin-right: 10px;
      }
      .content-state {
      }
      .content-button {
        margin-left: 10px;
      }
    }
  }
}
</style>
